<template>
  <el-dialog
    class="set-role-member-comp"
    :title="title"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(800)"
    :before-close="handleCancel"
  >
    <div class="search-container">
      <div class="content">
        <el-input
          placeholder="姓名/用户名"
          v-model="condition"
          @blur="handleSearch"
          @keydown.native.enter="handleSearch"
        ></el-input>
        <el-button class="search-btn" type="primary" @click="handleSearch">
          <i class="el-icon-search"></i>
        </el-button>
        <el-button type="primary" @click="handleRefresh">
          <i class="el-icon-refresh"></i>
        </el-button>
      </div>
      <div class="content">
        <el-button class="search-btn" type="primary" @click="handleAdd">
          添加成员
        </el-button>
        <el-button type="danger" @click="handleDelete">
          删除
        </el-button>
      </div>
    </div>
    <el-table
      v-loading="tableLoading"
      element-loading-custom-class="custom-load"
      :data="tableData"
      :height="$setRem(520, false)"
      @selection-change="handleSelectionChange"
      row-key="id"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="userId" label="用户名"></el-table-column>
      <el-table-column
        prop="telephoneNumber"
        label="联系方式"
      ></el-table-column>
      <div class="empty-content" slot="empty">
        <i class="iconfont iconwushuju"></i>
        <p>暂无数据</p>
      </div>
    </el-table>
    <el-pagination
      v-if="total > 10"
      :page-size="pageSize"
      :current-page="pageNo"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <add-member
      :visible="addVisible"
      :id="roleId"
      :loading="loading"
      :get-data="getMemberData"
      @cancel="handleClose"
      @submit="handleSave"
    >
    </add-member>
  </el-dialog>
</template>

<script>
import addMember from "./organization/addMember";

export default {
  components: {
    addMember
  },
  props: {
    // 弹框是否展示
    visible: {
      type: Boolean,
      default: true
    },
    // 角色Id
    roleId: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "成员列表"
    }
  },
  data() {
    return {
      condition: "",
      tableData: [],
      tableLoading: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: [],
      addVisible: false,
      loading: false
    };
  },
  watch: {
    visible(value) {
      if (!value) {
        this.multipleSelection = [];
        this.clear();
        this.condition = "";
      }
    },
    roleId(value) {
      value && this.getTableData();
    }
  },
  methods: {
    /**
     * 获取列表数据
     */
    async getTableData() {
      this.tableLoading = true;
      const params = {
        pageNum: this.pageNo,
        id: this.roleId,
        pageSize: this.pageSize,
        condition: this.condition,
        type: "1" // 1：已选择用户；2：未选择用户
      };
      const {
        success,
        data: { data }
      } = await this.$Model.getRoleUserList(params);
      this.tableLoading = false;
      if (success && data) {
        this.tableData = data.list || [];
        this.total = data.total || 0;
      }
    },
    // 获取成员数据
    getMemberData(params) {
      return this.$Model.getRoleUserList(params);
    },
    handleSearch() {
      this.clear();
      this.getTableData();
    },
    handleRefresh() {
      this.condition = "";
      this.handleSearch();
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    /**
     * pageSize 改变时会触发
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 添加成员
    handleAdd() {
      this.addVisible = true;
    },
    // 删除
    handleDelete() {
      if (!this.multipleSelection.length) {
        return this.$message.warning("请勾选选项");
      }
      this.$confirm("此操作将删除选中的成员, 是否继续?", "提示", {
        type: "warning"
      }).then(async () => {
        const { success } = await this.$Model.setRoleUserList({
          roleId: this.roleId,
          type: "2", // 1：添加；2：删除
          userIds: this.multipleSelection.map(v => v.uuid).join(",")
        });
        if (success) {
          this.multipleSelection >= this.tableData.length && this.clear();
          this.getTableData();
          this.$message.success("删除成功");
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 保存
    async handleSave(data) {
      this.loading = true;
      const { success } = await this.$Model.setRoleUserList({
        roleId: this.roleId,
        type: "1", // 1：添加；2：删除
        userIds: data.join(",")
      });
      this.loading = false;
      if (success) {
        this.getTableData();
        this.$message.success("添加成功");
        this.addVisible = false;
      }
    },
    // 关闭添加成员
    handleClose() {
      this.addVisible = false;
      this.loading = false;
    },
    // 取消
    handleCancel() {
      this.$emit("cancel");
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/dialog";

.set-role-member-comp {
  .search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-input {
        width: 260px;
        margin-right: 20px;
      }
    }
  }
}
</style>
